<template>
  <div class="create-sop-main">
    <NavigationBarBack title="新增问题" />
    <div class="create-sop-wrap">
      <el-form ref="form" :model="form" label-width="175px" class="create-sop-form" label-position="left">
        <div class="config-box">
          <div class="config-settig-card">
            <div class="card-head">
              <div class="card-title">基本设置</div>
            </div>
            <div class="card-body">
              <el-form-item label="标准问题：">
                <el-input type="text" placeholder="请输入内容" v-model="form.text" maxlength="100" show-word-limit />
              </el-form-item>
              <el-form-item>
                <div slot="label">
                  <span class="f-14 pt-4 mr-8">精准关键词</span>
                  <el-tooltip effect="dark" placement="top" popper-class="commtooltip">
                    <div slot="content">
                      客户发送的消息只有关键词，<br />一字不差，即触发自动回复
                    </div>
                    <svg-icon icon-class="iquestion" class-name="c_888999 f-15" />
                  </el-tooltip>：
                </div>
                <el-input placeholder="输入关键词，按回车添加" v-model="form.keyword1" maxlength="50" show-word-limit
                  @keyup.enter.native="handleAdd(1)">
                  <template slot="append">
                    <i class="el-icon-plus f-16 c_primary" @click="handleAdd(1)"></i>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item>
                <div slot="label">
                  <span class="f-14 pt-4 mr-8">模糊触发关键词</span>
                  <el-tooltip effect="dark" placement="top" popper-class="commtooltip">
                    <div slot="content">
                      只要客户发送的消息中包<br/>含关键词，即触发自动回复
                    </div>
                    <svg-icon icon-class="iquestion" class-name="c_888999 f-15" />
                  </el-tooltip>：
                </div>
                <el-input placeholder="输入关键词，按回车添加" v-model="form.keyword1" maxlength="50" show-word-limit
                  @keyup.enter.native="handleAdd(1)">
                  <template slot="append">
                    <i class="el-icon-plus f-16 c_primary" @click="handleAdd(1)"></i>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item>
                <div slot="label">
                  <span class="f-14 pt-4 mr-8">回复优先级</span>
                  <el-tooltip effect="dark" placement="top" popper-class="commtooltip">
                    <div slot="content">
                      当客户同时触发多个关键词回复规则<br/>时，<br/>系统会优先发送回复优先级较高的内<br/>容
                    </div>
                    <svg-icon icon-class="iquestion" class-name="c_888999 f-15" />
                  </el-tooltip>：
                </div>
                <div class="progress-grid">
                  <div class="progress" @mousedown="onDragStart">
                  <el-progress
                    style="margin-top: 12px; cursor: pointer"
                    :percentage="progress"
                  ></el-progress>
                </div>
                <el-input size="small" v-model="progress" style="width: 88px;"/>
                </div>
              </el-form-item>
            </div>
          </div>
          <div class="config-settig-card">
            <div class="card-head">
              <div class="card-title">回复设置</div>
            </div>
            <div class="card-body">
              <el-form-item label="回复设置：">
                <el-radio-group v-model="form.status">
                  <el-radio :label="1"><span style="color: #000;font-weight: 400;">按顺序全部回复</span></el-radio>
                  <el-radio :label="0"><span style="color: #000;font-weight: 400;">随机回复一条</span></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="回复内容：">
                <material-content ref="material" />
              </el-form-item>
            </div>
          </div>
        </div>
      </el-form>
    </div>
    <div class="create-sop-footer">
      <el-button size="small" plain>取消</el-button>
      <el-button size="small" plain>保存</el-button>
      <el-button size="small" type="primary">保存并继续</el-button>
    </div>
  </div>
</template>
<script>
import NavigationBarBack from '@/components/NavigationBarBack'
import MaterialContent from "@/components/MaterialContent";
export default {
  data() {
    return {
      customer: 0,
      isDragEnd: false,
      progress: 100,
      form: {
        customer: 0,
        customerGroup: 0,
        switch: false,
        labeltype: 1
      }
    }
  },
  components: {
    NavigationBarBack,
    MaterialContent
  },
  methods: {
    onDragStart(event) {
      this.isDragEnd = true;
      const progressBox = this.$el.querySelector(".progress");
      progressBox.addEventListener("mouseup", this.onDragEnd);
      progressBox.addEventListener("mousemove", this.onDrag);
    },
    onDragEnd() {
      this.isDragEnd = false;
    },
    onDrag(event) {
      if (this.isDragEnd) {
        const progressBox = this.$el.querySelector(".progress");
        const rect = progressBox.getBoundingClientRect();
        const width = rect.width;
        const offsetX = event.clientX - rect.left;
        let percentage = Math.round((offsetX / width) * 100);
        percentage = Math.max(0, Math.min(percentage, 100));
        this.progress = percentage;
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.create-sop-main {
  height: calc(100vh - 48px);
  overflow: auto;
  position: relative;

  .create-sop-wrap {
    margin: 12px 12px 76px;

    .config-box {
      margin: 0 auto;
      width: 1100px;
      display: flex;
      flex-direction: column;

      .config-settig-card {
        background: #ffffff;
        margin-top: 12px;
        flex: 1 1;
        text-align: left;
        text-align: initial;
        color: rgba(0, 0, 0, 0.85);
        border-radius: 4px;
        background: #fff;
        font-size: 14px;

        .card-head {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #e9e9e9;

          .card-title {
            padding: 16px;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.85);
          }
        }

        .card-body {
          padding: 24px 104px 24px 24px;

          .alter-box {
            box-sizing: border-box;
            margin: 0;
            color: rgba(0, 0, 0, .65);
            font-size: 14px;
            background-color: #f0f7ff;
            border: 1px solid #abceff;
            font-variant: tabular-nums;
            line-height: 24px;
            position: relative;
            display: flex;
            padding: 8px 15px;
            word-wrap: break-word;
            border-radius: 4px;

            .warning-svg {
              font-size: 18px;
            }

            .waring-text {
              margin-left: 8px;
            }
          }

          .create-sop-form {
            margin-top: 20px;

            .control-content {
              width: calc(100% - 150px);
              color: rgba(0, 0, 0, .65);
              font-size: 14px;
              font-variant: tabular-nums;
              line-height: 1.5715;
              margin-top: 20px;

              .head {
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 46px;
                background: #f5f6f7;
                border-radius: 2px;
                border: 1px solid #e9e9e9;
                padding: 0 16px;

                .checkbox {
                  display: flex;
                  align-items: center;

                  .radio-content {
                    margin-left: 24px;
                    padding: 4px 16px;
                    border-radius: 16px;
                    background-color: #fff;
                    border: 1px solid #e9e9e9;
                  }
                }
              }

              .body {
                padding: 16px;
                line-height: 22px;
                border: 1px solid #e9e9e9;
                border-top: none;

                .form-card {
                  .header {
                    height: 48px;
                    padding: 0 12px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    background: #fff;
                    border: 1px solid #f0f0f0;
                    border-radius: 4px 4px 0 0;

                    .flex-btns {
                      display: grid;
                      column-gap: 8px;
                      grid-template-columns: 22px 22px;

                      .ic-btn {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border: 2px solid #3070ff;
                        font-weight: bold;
                        height: 22px;
                        color: #3070ff;
                      }
                    }
                  }

                  .card-wrap {
                    padding: 16px;
                    background: #f9f9f9;
                  }
                }
              }
            }

            .desc {
              color: rgba(0, 0, 0, 0.45);
              font-size: 12px;
              margin: 8px 0px 12px;
              height: 20px;
              line-height: 20px;
            }
          }
          .progress-grid {
            display: grid;
            column-gap: 8px;
            grid-template-columns: 572px 88px;
          }
        }
      }
    }
  }

  .create-sop-footer {
    position: fixed;
    left: 226px;
    right: 0;
    bottom: 0;
    background: #ffffff;
    padding: 12px 16px;
    display: flex;
    align-content: center;
    justify-content: center;
  }
}

.select-label {
  float: left;
  color: rgba(0, 0, 0, .65);
  font-weight: 400;
  font-size: 12px;
  cursor: pointer;
}

.select-tag {
  line-height: 20px;
  white-space: nowrap;
  background: #fafafa;
  border: 1px solid #e9e9e9;
  border-radius: 4px;
  padding: 2px 7px;
  float: right;
  font-weight: 400;
  color: rgba(0, 0, 0, .65);
  font-size: 12px;
  margin: auto;
}
</style>